<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户角色</title>
    <jsp:include page="/commons/common-js.jsp"></jsp:include>
</head>
<body>
<table class="layui-hide" id="adminroletable" lay-filter="adminroletable"></table>

<script type="text/html" id="admintoolbar">
    <div class="layui-btn-container">
        <a class="layui-btn"  lay-event="addbtn">添加/修改</a>
    </div>
</script>

<script type="text/html" id="adminaddscript">
    <form class="layui-form" action="" lay-filter="adminaddform" style="padding-top: 20px">
        <input type="hidden" name="id" value="">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 60px">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required  lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 60px">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" placeholder="不输入不修改" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="admintool">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-danger layui-btn-xs"  lay-event="ban">禁用/解禁</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs"  lay-event="roleedit">修改角色</a>
    </div>
</script>

<script type="text/html" id="statetemplet">
    {{# if(d.state==1){ }}
    <span >正常</span>
    {{# }else { }}
    <span style="color: red">禁用</span>
    {{# } }}
</script>
<script type="text/html" id="selecttemplet">
    <table class="layui-hide" id="roletable" lay-filter="roletable" ></table>
    <input type="hidden" value="" id="adminId"/>
</script>

<script>
    layui.use(['table', 'form', 'laytpl'], function () {
        var table = layui.table,
            form = layui.form,
            laytpl = layui.laytpl

        var tableins = table.render({
            elem: '#adminroletable'
            , url: '/admin/all'
            , defaultToolbar: []
            , autoSort: false
            , toolbar: '#admintoolbar'
            , cols: [[
                {type:'checkbox'}
                ,{field: 'id', width: 60, title: '标识'}
                , {field: 'username', width: 95, title: '昵称'}
                , {field: 'state', width: 80, title: '状态', templet: '#statetemplet'}
                , {field: 'tool', width: 160, title: '操作',toolbar:'#admintool'}
                , {field: 'rolename', width: 1200, title: '角色'}
            ]]
            , height: '800',
        });

        //监听头工具事件
        table.on('toolbar(adminroletable)', function(obj){
            if(obj.event === 'addbtn'){
                laytpl(adminaddscript.innerHTML).render({}, function (html) {
                    var layerc = layer.open({
                        type: 1,
                        title: "操作", //不显示标题
                        skin: 'layui-layer-rim', //加上边框
                        area: ['350px', '250px'], //宽高
                        btn:['确定','取消'],
                        content: html,
                        yes(){
                            var data = form.val("adminaddform");
                            $.ajax({
                                url:"/admin/add",
                                data:data,
                                success:function(res){
                                    layer.msg(res.msg);
                                    tableins.reload();
                                    layer.close(layerc);
                                }
                            })
                        },
                    });
                    form.render();
                    var checkStatus = table.checkStatus('adminroletable')
                        ,checkStatusdata = checkStatus.data;
                    if (checkStatusdata[0]){
                        console.debug(checkStatusdata[0])
                        form.val("adminaddform",checkStatusdata[0]);
                    }
                });
            }
        })

        //监听行工具事件
        table.on('tool(adminroletable)', function(obj){
            var data = obj.data;
            if(obj.event === 'ban'){
                layer.confirm('真的禁用/解禁该用户吗？', function(index){
                    $.ajax({
                        data:{
                            "id":data.id,
                            "state":data.state
                        },
                        url:'/admin/ban',
                        success:function(res){
                            layer.msg(res.msg);
                            tableins.reload();
                        }
                    })
                    layer.close(index);
                });

            }else if (obj.event === 'roleedit'){
                laytpl(selecttemplet.innerHTML).render({}, function (html) {
                    var layerc = layer.open({
                        type: 1,
                        title: "操作", //不显示标题
                        skin: 'layui-layer-rim', //加上边框
                        area: ['250px', '400px'], //宽高
                        btn:['确定','取消'],
                        content: html,
                        yes(){
                            var checkStatus = table.checkStatus('roletable')
                                ,data = checkStatus.data;
                            var adminId = $("#adminId").val()
                            if (!adminId||data.length==0){
                                layer.msg("未选中用户或角色")
                                return
                            }
                            var ids = [];
                            for (let x in data) {
                                ids.push(data[x].id)
                            }

                            $.ajax({
                                url:"/admin/role",
                                traditional: true,
                                data:{
                                    "adminId":adminId,
                                    "roleIds":ids
                                },
                                success:function(res){
                                    layer.msg(res.msg);
                                    tableins.reload();
                                    layer.close(layerc);
                                }
                            })
                        },
                    });

                });
                $("#adminId").val(obj.data.id)
                table.render({
                    elem: '#roletable'
                    ,url:'/role/all'
                    , cols: [[
                        {type:'checkbox'}
                        ,{field: 'id', width: 60, title: '标识'}
                        , {field: 'name', width: 135, title: '名称'}

                    ]]
                });
            }
        });


    });
</script>

</body>
</html>
